<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<%@include file="/WEB-INF/taglibs/common/taglibs.jsp"%>

<head>
<title><spring:message code="admin.transaction.createdatafieldmappings.title" /></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="<c:url value="/css/styles.css"/>" />
<script src="<c:url value="/javascripts/jquery-1.4.4.js"/>"></script>
<script src="<c:url value="/javascripts/jquery.tablednd_0_5.js"/>"></script>
<script src="<c:url value="/javascripts/common.js"/>"></script>

<script type="text/javascript">
var flatFileOrder="";
<c:forEach items="${tableFields}" var="item" varStatus="i">
flatFileOrder+="${item}"+","	</c:forEach>

$(document).ready(function() {
	$("#table-1").tableDnD({
		onDragClass: "dragTableRow",

		});
 
	
});

function getOrdersData(){
	var table=$("#table-1");
	var row = 0;
        var rows = table[0].tBodies[0].rows;
        var orderStr="";
        for (var i=0; i<rows.length; i++) {
            orderStr += rows[i].id+",";
        }
        document.getElementById("csvOrder").value=orderStr;
        document.getElementById("flatTableFieldsOrder").value=flatFileOrder;
    
}

</script>

</head>

<body><%@include file="../top_menu.jsp"%>
<table width=100%>
	<tr>
		<td><%@include
			file="/WEB-INF/jsp/menu/admin_transaction_menu.jsp"%>
		<br />
		</td>
	</tr>
	<tr>
		<td><%@include file="/WEB-INF/jsp/include/messages.jsp"%>
		<br />
		</td>
	</tr>
</table>
<br />
<br />
<form:form modelAttribute="fileUpload" method="post"
	action="saveFieldMapping.htm" onsubmit="getOrdersData()">

	<form:hidden path="csvOrder" id="csvOrder" />
	<form:hidden path="flatTableFieldsOrder" id="flatTableFieldsOrder" />
	<form:hidden path="fileName" id="fileName" />
	<form:hidden path="historyId" id="historyId" />
	<form:hidden path="mappingId" id="mappingId"/>
	<table width=70% class="formTable">


		<tr class="formHeader">
			<td colspan="2"><spring:message code="admin.transaction.createdatafieldmappings.label.createfieldmappings" /></td>
		</tr> 
		<tr><td colspan="2">${errorMessage}</td></tr> 
		<c:set var="minus1" value="-1" />
		<c:if test="${fileUpload.mappingId eq minus1}">
			<tr>
				<td align="left" width="40%"><spring:message code="admin.transaction.createdatafieldmappings.label.mappingname" /></td>
				<td><form:input path="mappingName" /></td>
			</tr>
			<tr>
				<td align="left" width="40%"><spring:message code="admin.transaction.createdatafieldmappings.label.mappingdescription" /></td>
				<td><form:input path="mappingDescription" /></td>
			</tr>
		</c:if>
		<tr>
			<td colspan="2"><spring:message code="admin.transaction.createdatafieldmappings.label.draganddropcsvfile" />.</td>
		</tr>
		<tr bgcolor="#ccc">
			<td><spring:message code="admin.transaction.createdatafieldmappings.label.flattablecolumns" /></td>
			<td><spring:message code="admin.transaction.createdatafieldmappings.label.csvfilecolumns" /></td>
		</tr>
		<tr>
			<td valign="top">
			<table cellspacing="0" cellpadding="2"
				style="background-color: #ccc; width: 100%; border: 1px solid black">
				<c:forEach items="${tableFields}" var="columns" varStatus="i">
					<tr style="border-bottom: 1px solid black; height: 30px">
						<td style="border-bottom: 1px solid black;">
						<div>${columns}</div>
						</td>
					</tr>

				</c:forEach>
			</table>
			</td>
			<td valign="top">
			<table id="table-1" cellspacing="0" cellpadding="2"
				style="background-color: #acc; border: 1px solid black; width: 100%;">
				<tbody>
					<c:forEach items="${csvFields}" var="item" varStatus="i">
						<tr style="border-bottom: 1px solid black; height: 30px"
							id="${item}">
							<td style="border-bottom: 1px solid black;">${item}</td>
						</tr>

					</c:forEach>
				</tbody>
			</table>
			</td>

		</tr>
		<tr class="buttonPanel">
			<td colspan="2"><input type="submit" class='ui-button ui-state-default ui-corner-all' value="<spring:message code="admin.transaction.createdatafieldmappings.button.import" />" name="import"
				onclick="createMapping();" /> 
				<input type="button" class='ui-button ui-state-default ui-corner-all' value="<spring:message code="admin.transaction.createdatafieldmappings.button.cancel" />"
				name="cancel" onclick="location.href=transaction_summary.htm"/></td>
		</tr>
	</table>

</form:form><%@include file="/WEB-INF/jsp/include/footer.jsp"%>
</body>
</html>